<template>
  <div class="login">
    <div class="login_warp">
      <div class="login-logo">
        <!-- <img class="logo-image"
          src="@/assets/images/logo-default.png"> -->
        <p class="logo-image">项目筹划评审系统V1.0</p>
      </div>
      <el-form ref="loginRef"
        :model="loginForm"
        :rules="loginRules"
        class="login-form">
        <h2>登录</h2>
        <ul>
          <li>用户名/手机号/邮箱</li>
          <li>
            <el-form-item prop="userCode">
              <el-input v-model="loginForm.userCode"
                type="text"
                size="large"
                auto-complete="off"
                placeholder="账号">
                <template #prefix>
                  <el-icon :size="20"
                    class="input-icon">
                    <User />
                  </el-icon>
                </template>
              </el-input>
            </el-form-item>
          </li>
        </ul>
        <ul>
          <li>登录密码</li>
          <li>
            <el-form-item prop="password">
              <el-input v-model="loginForm.password"
                type="password"
                size="large"
                auto-complete="off"
                placeholder="密码"
                @keyup.enter="handleLogin">
                <template #prefix>
                  <el-icon :size="20"
                    class="input-icon">
                    <Lock />
                  </el-icon>
                </template>
              </el-input>
            </el-form-item>
          </li>
        </ul>
        <ul>
          <li>
            <el-form-item style="width:100%;">
              <el-button :loading="loading"
                size="large"
                type="primary"
                class="login-btn"
                @click.prevent="handleLogin">
                <span v-if="!loading">登 录</span>
                <span v-else>登 录 中...</span>
              </el-button>
            </el-form-item>
          </li>
        </ul>
      </el-form>
    </div>

  </div>
</template>

<script setup>
import useUserStore from '@/store/modules/store-user'
import { getCurrentInstance } from 'vue'
const { appContext } = getCurrentInstance();
const globalProxy = appContext.config.globalProperties;

const router = useRouter()
const userStore = useUserStore()
const { proxy } = getCurrentInstance()

const loginForm = ref({
  userCode: "23003",
  password: "dsyf905"
});

const loginRules = {
  userCode: [{ required: true, trigger: "blur", message: "请输入您的账号" }],
  password: [{ required: true, trigger: "blur", message: "请输入您的密码" }],
};

const loading = ref(false);
const redirect = ref(undefined);

function handleLogin() {
  proxy.$refs.loginRef.validate(valid => {
    if (valid) {
      loading.value = true;
      // 调用action的登录方法
      userStore.login(loginForm.value).then(() => {
        loading.value = false;
        router.push({ path: redirect.value || "/" });
      }).catch(() => {
        loading.value = false;
        globalProxy.$message({ message: "error", type: "error" });
      });
    }
  });
}

// function getCookie() {
//   const userCode = Cookies.get("userCode");
//   const password = Cookies.get("password");
//   loginForm.value = {
//     userCode: userCode === undefined ? loginForm.value.userCode : userCode,
//     password: password === undefined ? loginForm.value.password : password,
//   };
// }

// getCookie();
</script>

<style lang='scss' scoped>
.login {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background-image: url("../assets/images/login-background.jpg");
  background-size: cover;
}

.login-form {
  background: #fff;
  border: #eee solid 1px;
  padding: 40px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  .el-input {
    height: 40px;
    input {
      height: 40px;
    }
  }
  .input-icon {
    height: 39px;
    width: 14px;
    margin-left: 0px;
  }
  h2 {
    display: block;
    font-size: 20px;
    font-weight: 400;
    text-align: center;
    padding-bottom: 13px;
    word-break: break-all;
    border-bottom: 1px solid #eee;
    margin: 0 0 25px 0;
  }
  ul {
    padding-bottom: 5px;
    width: 100%;
    margin-bottom: 0;
  }
  li {
    font-size: 15px;
    color: #333;
    line-height: 30px;
    /* padding: 5px 0; */
  }
  .login-btn {
    width: 100%;
    font-size: 16px;
  }
}
.login-tip {
  font-size: 13px;
  text-align: center;
  color: #bfbfbf;
}
.login-code {
  width: 33%;
  height: 40px;
  float: right;
  img {
    cursor: pointer;
    vertical-align: middle;
  }
}
.login-code-img {
  height: 40px;
  padding-left: 12px;
}

.login_warp {
  width: 500px;
  height: 500px;
  position: absolute;
  left: 50%;
  top: 40%;
  margin-left: -250px;
  margin-top: -250px;
  .login-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 76px;
    margin-bottom: 10px;
    .logo-text {
      margin-left: 15px;
      span {
        margin-bottom: 0;
        font-size: 34px;
        font-weight: 700;
      }
    }
  }
}
ul {
  padding-left: 0;
}
.logo-image {
  font-size: 28px;
}
</style>